<script setup name="HosBedForm">
import { ref, reactive,onMounted } from "vue";
import { Search, ArrowLeft, ArrowRight, Close, Aim } from '@element-plus/icons-vue';
import PageRigtIndex from "@/components/PageRigt/index.vue";
import {selectZhuanMa} from "@/utils/selectZhuanMaUtils";
import { ElNotification } from 'element-plus';
//1.定义各种变量和常量数据。
//各种元素的对象名称
const tableRef=ref(null);
const form = ref({bmbm:'',region:''});

//查询数据源的变量常量
const dataSourceTableConst = ref([]); 
let dataSourceTableListConst = {list:[]}; //临时数据源用来存储插入、修改、删除数据源 
const bmConst=ref({name: 'VxeSelect',options: []});    //科室编码
const syztConst=ref({name: 'VxeSelect',options: []});  //使用状态
const sfzyConst=ref({name: 'VxeSelect',options: []});  //是否占用
const rybmConst=ref({name: 'VxeSelect',options: []});  //人员编码
const sfzbConst=ref({name: 'VxeSelect',options: []});  //是否在编
const cwlbConst=ref({name: 'VxeSelect',options: []});  //床位类别
const ksbqbmConst=ref({name: 'VxeSelect',options: []});//科室病区编码

//2.定义增删查改等方法
//2.1查询交易102010获取床位信息
 const getDataSourceTableConstFun=async ()=>{
    const res = await window.xinpuHttpApi('102010',{bmbm:form.value.bmbm});
    dataSourceTableConst.value=res.ReContent;
 }
 const  getBmConstFun    =async ()=>{
 const res = await window.xinpuWebsApi('GetFixCode', { "bh":  "xp_bm_001"  });
 console.log("科室编码", res);
 bmConst.value.options=res.ReContent  ;

 }//科室编码方法
 const  getSyztConstFun  =async ()=>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":  "xp_001"  });
  syztConst.value.options=res.ReContent  ;
 }//使用状态方法
 const  getSfzyConstFun  =async ()=>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":  "xp_cwsfzy" });
  sfzyConst.value.options=res.ReContent  ;

 }//是否占用方法
 const  getRybmConstFun  =async ()=>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":  "xp_ry_001"});
  rybmConst.value.options=res.ReContent  ;

 }//人员编码方法  
 const  getSfzbConstFun  =async ()=>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":  "xp_cw_sfzb" });
  sfzbConst.value.options=res.ReContent ;
 }//床位是否在编方法
 const  getCwlbConstFun  =async ()=>{
  const res = await window.xinpuWebsApi('GetXpmbCode', { "bh":  "yke411" });
  cwlbConst.value.options=res.ReContent;
 }//床位类别方法
 const  getKsbqbmConstFun=async ()=>{
  const res = await window.xinpuWebsApi('GetXpmbCode', { "bh":  "yke414" });
  ksbqbmConst.value.options=res.ReContent  ;
 }//科室病区编码方法

//2.0把标识列的数字转码成删除、修改、新增等文字
const biaoshi = (cellValue ) => {
    if(cellValue=='2')
    {
     return   '待改'
    }
    else if(cellValue=='1')
    {
     return  '待增'
    }
    else if(cellValue=='3')
    {
     return  '待删'
    }
    else if(cellValue=='9')
    {
     return  '待删'
    }
    else
    {
     return ''
    }  
}
//2.1保存交易
 const saveFun=async()=>{
  let linshitableData=[];
  for(let i=0;i<dataSourceTableConst.value.length;i++){
    if(dataSourceTableConst.value[i].saveflag!=0){
       //移除这两个属性
      delete dataSourceTableConst.value[i].ReContent;
      delete dataSourceTableConst.value[i]._X_ROW_KEY;
      linshitableData.push(dataSourceTableConst.value[i]);  
    }
  }
  dataSourceTableListConst.list=linshitableData;
  const res = await window.xinpuHttpApi('102011', dataSourceTableListConst);
  console.log(res);
  if(res !=undefined){
    if(res.Flag==true){
       ElNotification.success({
        title: '成功',
        message: '保存数据成功',
        offset: 100,
      });
      getDataSourceTableConstFun(); 
    }
  }
  
}
//2.2插入方法
 const insertFun=async ()=>{
//点插入的时候新建一行临时数据，数据里面给定一些默认值，其他让用户选择
  const insertRowObj=ref({
    Remsg: null,
    aae013: "",
    bah_kh: "",
    bh: dataSourceTableConst.value[dataSourceTableConst.value.length-1].bh+1,//这里编号给数据源最后一个数据的编码，有些交易是不传，后端生成
    bmbm: "",
    bz: "",
    fybh: 0,
    mc: "",
    rybm: "0000",
    saveflag: 1,
    sf: "0",
    sfzb: "1",
    syzt: "1",
    xgrq: "2024-10-18 11:00:16",
    xpsm_zth: null,
    yke411: null,
    yke414: ""

  });
  const $table = tableRef.value;
  dataSourceTableConst.value.push(insertRowObj.value);
  const { row: newRow } = await $table.insertAt(insertRowObj.value, -1);
  await $table.setEditCell(newRow, 'mc');
  ElNotification.success({
    title: '成功',
    message: '第'+(dataSourceTableConst.value[dataSourceTableConst.value.length-1].bh)+'行创建成功，在表格最下面',
    offset: 100,
  });
}
//2.3删除方法
const deleteFun=()=>{
  const $table = tableRef.value;
  const selectRecords = $table.getCurrentRecord();
  dataSourceTableConst.value[$table.getRowSeq(selectRecords)-1].saveflag=3;
  console.log(dataSourceTableConst.value[$table.getRowSeq(selectRecords)]);
}
const cellClickConst=ref('删除');
let rowObj=ref({});

const cellClick=(row)=>{
  //console.log(row.row.saveflag);
  if(row.row.saveflag==3){
    cellClickConst.value='取消删除';
  }

  getPageRigthDataObj.value=row.row;
  
  console.log(getPageRigthDataObj);
  watch(()=>[getPageRigthDataObj.value ], ([objnew ], [objold ]) => {
    // 右侧子界面的数据是来源于左侧表格点击后的一行对象的数据，要监听是在右侧修改这个行对象带来的改变，不
    // 要点击第一行后又点击第二行的数据带来的改变，所以这里要判断一下，上次的老数据必须和本次的新数据一直
    // 不然就认为你是点击了其他行带来的改变，所以就不做修改标记处理
    if(getPageRigthDataObj.value==objold){
      const $table = tableRef.value;
      //添加行后标记是3，要点到单元格做标记，这个位置和修改方法一致了，所以加个判断只有标记不是新增和删除类型的才做修改标记
      if(dataSourceTableConst.value[$table.getRowSeq(getPageRigthDataObj.value)-1]!=undefined){
          if(dataSourceTableConst.value[$table.getRowSeq(getPageRigthDataObj.value)-1].saveflag==0){
          dataSourceTableConst.value[$table.getRowSeq(getPageRigthDataObj.value)-1].saveflag=2;
          console.log('执行了');
        }
      }    
    }
     
     
 }, { deep: true });
}
//2.4修改方法
//定义一个变量记录变化前后的值
let updateConst='';
const updateFun=(row,a)=>{
  const $table = tableRef.value;
  if(a==1){
    updateConst=row.column.model.value;
  }
  else if(a==2){
    if(dataSourceTableConst.value[$table.getRowSeq(getPageRigthDataObj.value)-1].saveflag==0){
      if(updateConst!=row.column.model.value){
        
        dataSourceTableConst.value[$table.getRowSeq(row.row)-1].saveflag=2;
        //  判断成功后，就把updateConst恢复为空
        updateConst='';
      }
    }
  } 
}
//2.5清空床位信息
const clerChuangWeiFun=async ()=>{
  const $table = tableRef.value;
  const selectRecords = $table.getCurrentRecord();
  const res = await window.xinpuHttpApi('102012',{bh:dataSourceTableConst.value[$table.getRowSeq(selectRecords)-1].bh});
    if(res.Flag==true){
       ElNotification.success({
        title: '成功',
        message: '清空床位信息成功',
        offset: 100,
      });
      getDataSourceTableConstFun(); 
    }
   
 }


//3.定义各种vue钩子函数，子传父、父传子等属性方法等
//3.1
onMounted(() => {
  getDataSourceTableConstFun();
  getBmConstFun();
  getSyztConstFun();
  getSfzyConstFun();
  getRybmConstFun();
  getCwlbConstFun();
  getKsbqbmConstFun();
  getSfzbConstFun();

});
//isShowRightFun和isShowRightFun是右侧详细界面的显示和隐藏控制方法
const isShowRight = ref(false);
const isShowRightFun=()=>{
  isShowRight.value = !isShowRight.value;
}
//syzt和syztFun是右侧详细界面里面的使用状态点击后的字体和边框颜色的控制方法
const syzt=ref([
  {a:"1px solid #EBEBEB",b:"#333333"} ,
  {a:"1px solid #EBEBEB",b:"#333333"} ,
  {a:"1px solid #EBEBEB",b:"#333333"} 

]);
const syztFun=(event)=>{
  if(event.srcElement.innerText=="正常"){
    
    syzt.value[0].a="1px solid #359DE1";
    syzt.value[0].b="#359DE1";
    syzt.value[1].a="1px solid #EBEBEB";
    syzt.value[1].b=" #333333";
    syzt.value[2].a="1px solid #EBEBEB";
    syzt.value[2].b="#333333";
  }
  else if(event.srcElement.innerText=="停用"){
    syzt.value[1].a="1px solid #359DE1";
    syzt.value[1].b="#359DE1";
    syzt.value[0].a="1px solid #EBEBEB";
    syzt.value[0].b="#333333";
    syzt.value[2].a="1px solid #EBEBEB";
    syzt.value[2].b="#333333";
  }
  else if(event.srcElement.innerText=="申请中"){
    syzt.value[2].a="1px solid #359DE1";
    syzt.value[2].b="#359DE1";
    syzt.value[1].a="1px solid #EBEBEB";
    syzt.value[1].b="#333333";
    syzt.value[0].a="1px solid #EBEBEB";
    syzt.value[0].b="#333333";
  }
}

//3.2定义给右侧详细菜单页面的父传子方法和数据对象
const getPageRigthDataObj=ref({});
const getPageRigthDataObjFun=(row)=>{
  getPageRigthDataObj.value=row.row;

}
const setPageRigthDataObjFun=(rowObj)=>{
   
  const $table = tableRef.value;
  dataSourceTableConst.value[$table.getRowSeq(rowObj)-1] =rowObj;
}
 

const aa=ref('');




</script>

<template>
<div class="main-content">
    <div class="main-content-case">
        <div class="admin-top">
            <div class="admin-case-top">
            <div style="font-size: 14px; color: #333333">部门名称</div>
            <el-select 
              style="width:200px;
                margin-left:8px" 
                v-model="form.bmbm" 
                clearable
                placeholder="全部">
                <el-option
                  v-for="item in bmConst.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
            </el-select>
          </div>
          <div class="admin-case-top">
            <div style="font-size: 14px; color: #333333">床位名称</div>
            <el-input v-model="form.region" style="width: 180px;margin-left: 8px;"/>
          </div>
          <el-button type="primary" :icon="Search" style="width:72px" @click="getDataSourceTableConstFun()">查询</el-button>        
        </div>
        <div class="line"></div>
        <div class="button-case">
          <div class="button-case-box" @click="insertFun()">
            <img
              src="../../../assets/images/add_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>新增</div>
          </div>
          <div class="button-case-box" @click="deleteFun()">
            <img
              src="../../../assets/images/del_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>{{cellClickConst}}</div>
          </div>



          <div class="button-case-box"  > 
            <img
                src="../../../assets/images/save_icon.png"
                style="width: 16px; height: 16px; margin-right: 2px"
                alt=""
                srcset=""
                />
              <el-popconfirm title="确认保存吗?"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="saveFun()"
              @cancel=" "
              >
              <template #reference>
                <div>保存</div>
              </template>
              
            </el-popconfirm>   
          </div>




          <div class="button-case-box" @click="saveFun()">
            <img
              src="../../../assets/images/reset_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>重置</div>
          </div>
          <div class="button-case-box" @click="isShowRightFun">
            <img
              src="../../../assets/images/bangding_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>详情</div>
          </div>
          <!-- <div class="button-case-box">
            <img
              src="../../../assets/images/shenqing_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>医保信息申请</div>
          </div>
          <div class="button-case-box">
            <img
              src="../../../assets/images/tingyongshenq_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>医保信息停用申请</div>
          </div>
          <div class="button-case-box">
            <img
              src="../../../assets/images/xinxichaxun_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>医保信息查询</div>
          </div> -->
          
          <div class="button-case-box"  >
            <img
              src="../../../assets/images/qingkong_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <el-popconfirm title="确认保存吗?"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="clerChuangWeiFun()"
              @cancel=" "
              >
              <template #reference>
                <div>清空床位号</div>
              </template>
              
            </el-popconfirm>   
 
          </div>     
        </div>
        <div class="table-case">
          <vxe-table
            ref="tableRef"
            border
            height= auto  
            show-overflow
            :columnConfig="{resizable: true}"
            :row-config="{isCurrent:true,isHover:true}"
            :edit-config="{mode: 'cell', trigger: 'click',showIcon:false}"
            :data="dataSourceTableConst"
            :scroll-y="{enabled: true, gt: 0}"
            @editActivated="(row) => updateFun(row,1)"   
            @edit-closed="(row) => updateFun(row,2)"   
            @cell-click="cellClick"
             
           >
            
            <vxe-column field="saveFlag" title="标识" width="60">
              <template  #default="{ row }">
                <div style="color: red;"> {{biaoshi(row.saveflag)}} </div>
              </template>
            </vxe-column>
            <vxe-column field='bh'     title='编码'      width=60   :edit-render="{ name: 'input'}">
            </vxe-column>
            <vxe-column field='mc'     title='床位名称'  width=200   :edit-render="{ name: 'input'}">
            </vxe-column>
            <vxe-column field='bmbm'   title='所属部门'  width=120   :edit-render=bmConst>
            </vxe-column>
            <vxe-column field='syzt'   title='使用状态'  width=80    :edit-render=syztConst>
            </vxe-column>
            <vxe-column field='sf'     title='占用'      width=60    :edit-render=sfzyConst> 
            </vxe-column>
            <vxe-column field='bah_kh' title='住院号'    width=140   >
            </vxe-column>
            <vxe-column field='bz'    title='每日床位费' width=120    :edit-render="{ name: 'input'}">
            </vxe-column>
            <vxe-column field='yke411' title='床位类别'  width=90    :edit-render=cwlbConst>
            </vxe-column>
            <vxe-column field='fybh'   title='费用编号'  width=80     >
            </vxe-column>
            <vxe-column field='sfzb'   title='在编非编'  width=90     :edit-render=sfzbConst>
            </vxe-column>
            <vxe-column   field='rybm'   title='修改人'    width=110    :edit-render=rybmConst>
            </vxe-column>
            <vxe-column field='yke414' title='病区编码' width=220     :edit-render=ksbqbmConst>
            </vxe-column>
            <vxe-column field='aae013' title='备注(加  )' width=220  :edit-render="{ name: 'input'}">
            </vxe-column>
            <vxe-column field='xgrq'  title='修改日期'  width=180     >   
            </vxe-column>
          </vxe-table>
        </div>
         
    </div>
    <!-- v-slot可以简写成# -->
    <PageRigtIndex class="right-content" v-if="isShowRight"  @close="isShowRightFun">
      <template v-slot:titlename>
        床位详情
      </template>
      <template #main-content :getPageRigthDataObj="getPageRigthDataObj">
        <div class="right-content-content">
          <div class="right-content-content-title">
          <div style="height:14px ;
              width: 2px;
              margin-top: 3px;
              margin-right: 2px; 
              background: #359DE1;">           
          </div>
          <div class="right-content-content-title-text">
            基本信息
          </div>
          </div>
          <div class="right-content-content-content">
            <div class="right-content-content-content-left xpFont">
            <div class="right-content-content-content-left-label  " >
              床位编码
            </div>
            <el-input disabled  style="width: 180px " v-model="getPageRigthDataObj.bh"/>
            </div>

            <div class="right-content-content-content-right  xpFont">
              <div class="right-content-content-content-left-label" >
              床位名称
            </div>
            <el-input  style="width: 190px " v-model="getPageRigthDataObj.mc"/>
            </div>
          </div>
          <div class="right-content-content-content">
            <div class="right-content-content-content-left  xpFont">
            <div class="right-content-content-content-left-label" >
              床位类别 {{ getPageRigthDataObj.yke411 }}
            </div>
            <el-select
            v-model="getPageRigthDataObj.yke411"
            placeholder="Select"
            size="large"
            style="width: 180px;"
            >
              <el-option
                v-for="item in cwlbConst.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            
            </div>
            <div class="right-content-content-content-right  xpFont">
              <div class="right-content-content-content-left-label" >
              所属部门
            </div>
            
            <el-select
            v-model="getPageRigthDataObj.bmbm"
            placeholder="Select"
            size="large"
            style="width: 190px;"
            
            >
              <el-option
                v-for="item in bmConst.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            </div>
          </div>
           
          <div class="right-content-content-content">
            <div class="right-content-content-content-left  xpFont">
            <div class="right-content-content-content-left-label" >
              每日床位费
            </div>
            <el-input  style="width: 165px "  v-model="getPageRigthDataObj.bz"/>
            </div>
            <div class="right-content-content-content-right  xpFont">
              <div class="right-content-content-content-left-label" >
              科室病区
            </div>            
            <el-select
            v-model="getPageRigthDataObj.yke414"
            placeholder="Select"
            size="large"
            style="width: 190px;"
            
            >
              <el-option
                v-for="item in ksbqbmConst.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>            
            </div>
          </div>
          <div class="right-content-content-content">
            <div class="right-content-content-content-left  xpFont">
            <div class="right-content-content-content-left-label" >
              床位是否占用
            </div>
            <el-radio-group v-model="radio1">
              <el-radio value="1" size="large">占用</el-radio>
              <el-radio value="2" size="large">未占用</el-radio>
            </el-radio-group>
            </div>
            <div class="right-content-content-content-right  xpFont">
              <div class="right-content-content-content-left-label" >
              使用状态
              </div>           
              <div style="width: calc(100% - 64px);height: 32px;  display: flex;" class="xpFontSyzt">
                  <div   @click="syztFun" :style="{border: syzt[0].a,color: syzt[0].b}" style=" cursor: pointer; width: calc(calc(100% - 4px) / 3); text-align: center;height: 32px;line-height:32px;border-radius: 4px 0px 0px 4px;">
                    正常
                  </div>
                  <div @click="syztFun" :style="{border: syzt[1].a,color: syzt[1].b }" style="cursor: pointer; width: calc(calc(100% - 4px) / 3); text-align: center;height: 32px;line-height:32px;">
                    停用
                  </div>
                  <div @click="syztFun" :style="{border: syzt[2].a,color: syzt[2].b }" style="cursor: pointer; width: calc(calc(100% - 4px) / 3); text-align: center;height: 32px;line-height:32px;border-radius: 0px 4px 4px 0px;">
                    申请中
                  </div>
              </div>
             
            </div>
          </div>
          <div class="right-content-content-content">
            <div class="right-content-content-content-left xpFont">
            <div class="right-content-content-content-left-label  " >
              费用编码
            </div>
            <el-input disabled  style="width: 180px " v-model="getPageRigthDataObj.fybh"/>
            </div>

            <div class="right-content-content-content-right  xpFont">
              <div class="right-content-content-content-left-label" >
              住院号&nbsp&nbsp&nbsp 
            </div>
            <el-input disabled  style="width: 190px " v-model="getPageRigthDataObj.bah_kh"/>
            </div>
          </div>
          <div class="right-content-content-content">
            <div class="right-content-content-content-left xpFont">
            <div class="right-content-content-content-left-label  " >
              修改人员
            </div>
             
            <el-select
            v-model="getPageRigthDataObj.rybm"
            placeholder="Select"
            size="large"
            style="width: 190px;"
            disabled 
            >
              <el-option
                v-for="item in rybmConst.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>      

            </div>

            <div class="right-content-content-content-right  xpFont">
              <div class="right-content-content-content-left-label" >
              修改日期
            </div>
            <el-input  disabled  style="width: 190px " v-model="getPageRigthDataObj.xgrq"/>
            </div>
          </div>

          <div class="right-content-content-content">
            <div class="xpFont" style="width: 100%;height: 240px; ">
            <div style="display: inline-block;width: 66px;vertical-align:top;">备注信息</div>
            <el-input  style="width: 464px ;height: 240px;" v-model="getPageRigthDataObj.aae013"/>
            </div> 

             
               
          </div>
        </div>
      </template>
      <template #button>
        <el-button  style="width:72px">取消</el-button>
        <el-popconfirm title="确认保存吗?"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="saveFun()"
              @cancel=" "
              >
              <template #reference>
                <el-button type="primary"   style="width:72px">保存</el-button>
              </template>
              
            </el-popconfirm>  
        
      </template>
    </PageRigtIndex>

</div>


</template>

<style lang="scss" scoped>
// :deep强制覆盖样式，提高!important优先级
:deep(::-webkit-scrollbar) {
    width: 10px !important;
    height: 10px !important;
}
// :deep强制覆盖样式，提高!important优先级
:deep(.vxe-cell--label) {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
:deep(.vxe-input--inner) {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
:deep(.vxe-cell--title) {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight:400;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
:deep(.vxe-select) {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight:400;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}




.main-content{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;

  .main-content-case{
    width: 100%;
    height: 100%;
    background:#fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    //32
    .admin-top{
        display: flex;
        align-items: center;
        height: 32px;
        .admin-case-top {
            display: flex;
            align-items: center;
            margin-right: 12px;
        }
    }
    //12+1+12
    .line {
        width: 100%;
        height: 1px;
        background: #ebebeb;
        margin: 12px 0;
    }
    //40
    .button-case{
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333333;
        margin-bottom: 10px 0px 10px 0px ;
        height: 40px;
        border: 1px solid #EBEBEB;
        .button-case-box {
            display: flex;
            align-items: center;
            margin-right: 12px;
            cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
        }
    }
    .table-case{
        width: 100%;
        height: calc(100% - 32px - 12px - 1px - 12px - 40px  );
       
    }
    
  }
    .right-content{
      width: 576px;
      height: calc(100vh - 91px);
      position: fixed;
      z-index: 2000;
      top: 91px;
      right: 0;
      .right-content-content{
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding: 12px;
          .right-content-content-title{
          padding-bottom: 12px;
          display: flex;
            .right-content-content-title-text{
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: bold;
              font-size: 14px;
              color: #333333;
              line-height: 20px;
              text-align: left;
              font-style: normal;
              text-transform: none;
          }
       
        }
        .right-content-content-content{
          
          width: 100%;
          height: 32px;
          margin-bottom: 16px;
          // background-color: aquamarine;
          display: flex;
          .right-content-content-content-left{
            width: calc(50% - 8px);
            height: 32px;
            margin-right: 12px;
            // background-color: rgb(92, 181, 151);
            display: flex;
            align-items: center; /* 垂直居中 */
            .right-content-content-content-left-label{
              margin-right: 8px;
              
            }
            
          }
          .right-content-content-content-right{
            width: calc(50% - 8px);
            height: 32px;
            // background-color: rgb(22, 180, 22);
            display: flex;
            align-items: center; /* 垂直居中 */
            .right-content-content-content-left-label{
              margin-right: 8px;
              
            }
          }
        }
      }
  }

}
.xpFont{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
.xpFontSyzt{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>